<template>
  <div class="export" @click="showExportList()">
    <div class="content">
      <div class="text">正在导出</div>
      <div class="loading-1">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <div v-if="dialogExportList" class="export-dialog">
      <div class="operator"><i class="iconfont icon-zuixiaohua" @click.stop="minimize"></i></div>
      <div class="content">
        <div class="list" v-for="item in globalExport.list">
          <div>正在导出"{{item.name}}"</div>
          <div class="loading-e">
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'export',
    data () {
      return {
        dialogExportList: false
      }
    },
    watch: {
    },
    props: {
      fiveName: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    computed: {
      ...mapState({
        globalExport: 'globalExport'
      })
    },
    methods: {
      minimize () {
        this.dialogExportList = false
      },
      showExportList () {
        this.dialogExportList = true
      }
    },
    beforeMount () {
    }
  }
</script>

<style scoped lang="stylus">
  @import '../../../assets/common.styl'
  .export-dialog
    color $cf-gray1
    background-color #fff
    position absolute
    right 100px
    width 300px
    top -40px
    box-shadow: 1px 1px 17px #ccc
    .content
      max-height: 154px;
      overflow-y: auto;
    .list
      text-align left
      position relative
      margin: 5px 10px
      border-bottom 1px solid #ccc
    @keyframes loading-e
      50%
        transform: scale(0.2);
        opacity: 0.3;
      100%
        transform: scale(1);
        opacity: 1;
    .loading-e
      position: relative;
      height 28px
    .loading-e i
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: absolute;
      background: #ccc;
    .loading-e i:nth-child(1)
      top: 8px;
      right: 200px;
      -webkit-animation: loading-e 1s ease 0s infinite;
    .loading-e i:nth-child(2)
      top: 8px;
      right: 180px;
      -webkit-animation: loading-e 1s ease 0.20s infinite;
    .loading-e i:nth-child(3)
      top: 8px;
      right: 160px;
      -webkit-animation: loading-e 1s ease 0.40s infinite;
    .operator
      text-align: right;
      margin: 8px 0px;
      margin-right:8px;
    .icon-zuixiaohua
      color #999
      cursor pointer
  .export
    background-color $c-main
    width: 55px;
    height: 55px;
    position: absolute;
    bottom: 90px;
    right 30px
    border-radius 50%
    padding 5px
    cursor pointer
    .content
      position relative
      text-align center
    .text
      margin-top: 10px
      color #fff
    @keyframes loading-1
      50%
        transform: scale(0.2);
        opacity: 0.3;
      100%
        transform: scale(1);
        opacity: 1;
    .loading-1
      position: relative;
      height 28px
    .loading-1 i
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: absolute;
      background: #fff;
    .loading-1 i:nth-child(1)
      top: 8px;
      right: 40px;
      -webkit-animation: loading-1 1s ease 0s infinite;
    .loading-1 i:nth-child(2)
      top: 8px;
      right: 25px;
      -webkit-animation: loading-1 1s ease 0.20s infinite;
    .loading-1 i:nth-child(3)
      top: 8px;
      right: 10px;
      -webkit-animation: loading-1 1s ease 0.40s infinite;
</style>
